﻿<%@ Page Language="C#" MasterPageFile="~/Front.Master" AutoEventWireup="true" CodeBehind="TaskStatistics.aspx.cs" Inherits="HRProject.User.TaskStatistics" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="IncludePlaceHolder" runat="server">
    <link rel="stylesheet" type="text/css" href="/css/jquery.jqplot.min.css" />
    <script language="javascript" type="text/javascript" src="/js/excanvas.js"></script>
    <script type="text/javascript" src="/js/jquery.jqplot.min.js"></script>
    <script language="javascript" type="text/javascript" src="/js/plugins/jqplot.barRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="/js/plugins/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" language="javascript">
        function init()
        {
            url = window.location.href;
            var data = new Array();
            data[0] = new Array();
            data[1] = new Array();
            var divs = $(".divTime");
            for (var i=0; i<divs.length; i++)
            {
                data[0][i] = divs.eq(i).find("input[name=finished]").val();
                data[1][i] = divs.eq(i).find("input[name=unfinished]").val();
            }
              plot3 = $.jqplot('chart3', data, {
                // Tell the plot to stack the bars.
                stackSeries: false,
                captureRightClick: true,
                seriesDefaults:{
                  renderer:$.jqplot.BarRenderer,
                  rendererOptions: {
                      // Put a 30 pixel margin between bars.
                      barMargin: 5,
                      // Highlight bars when mouse button pressed.
                      // Disables default highlighting on mouse over.
                      highlightMouseDown: true    
                  },
                  pointLabels: {show: true}
                },
                series:[
                    {label:'Finished'},
                    {label:'Unfinished'}
                ],
                axes: {
                  xaxis: {
                      renderer: $.jqplot.CategoryAxisRenderer
                  },
                  yaxis: {
                    // Don't pad out the bottom of the data range.  By default,
                    // axes scaled as if data extended 10% above and below the
                    // actual range to prevent data points right on grid boundaries.
                    // Don't want to do that here.
                    min:0,
                    max:<%= MaxTotalInEachRecord+1 %>,
                    padMin: 0,
                    tickInterval:1
                  }
                },
                legend: {
                  show: true,
                  location: 'e',
                  placement: 'outside'
                }      
              });
              // Bind a listener to the "jqplotDataClick" event.  Here, simply change
              // the text of the info3 element to show what series and ponit were
              // clicked along with the data for that point.
              /*
              $('#chart3').bind('jqplotDataClick', 
                function (ev, seriesIndex, pointIndex, data) {
                  $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
                }
              );*/
        }
        
        function previousYear()
        {
            var year = parseInt($("#hdfYear").val());
            $("input[name=year]").val(--year);
            $("#aspnetForm").submit();
        }

        function nextYear()
        {
            var year = parseInt($("#hdfYear").val());
            $("input[name=year]").val(++year);
            $("#aspnetForm").submit();
        }
        
        function go()
        {
            $("#aspnetForm").submit();
        }
    </script>
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TitleIconPlaceHolder" runat="server">
    <img alt="" src="/image/layout/icon/UserIcon.png" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="TitleNamePlaceHolder" runat="server">
    Task Statistics
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainPanelPlaceHolder" runat="server">
    <div>
        <input type="button" value="&lt;" onclick="previousYear();"/>
        <input type="text" name="year" value="<%= Year %>"/>
        <input type="hidden" id="hdfYear" value="<%= Year %>"/>
        <input type="hidden" name="userId" value="<%= UserId %>"/>
        <input type="button" value="&gt;" onclick="nextYear();"/>
        <input type="button" value="Go" onclick="go();"/>
    </div>
    <div id="chart3" style="width:800px; height:300px;"></div>
    <div style="display:none">
        <%
            for (int i = 0; i < ListStatistics.Count; i++)
            {
                %>
                <div class="divTime">
                    <input type="hidden" name="finished" value="<%= ListStatistics[i].Finished %>"/>
                    <input type="hidden" name="unfinished" value="<%= ListStatistics[i].Unfinished %>"/>
                </div>
                <%
            }
        %>
    </div>
</asp:Content>
